Introduction

This tutorial will describe how to use palettes and specify element and series colors as well as some more advanced coloring features.

Using Palettes

There are several 50 color palettes and over 40 5 color palettes available in the Palette enumeration. These can be defined in two ways.

A: Through Chart.PaletteName:

[C#]

Chart.PaletteName = dotnetCHARTING.Palette.Autumn;

[Visual Basic]

Chart.PaletteName = dotnetCHARTING.Palette.Autumn

This code will color each series based on a color in this palette.

B: Through Series.PaletteName

[C#]

mySeries.PaletteName = dotnetCHARTING.Palette.Autumn;

[Visual Basic]

mySeries.PaletteName = dotnetCHARTING.Palette.Autumn

Using palette properties of series will color each element in that series a unique color of the specified palette as well as alter the legend behavior.

NOTE: (Important) By specifying a series palette, the legend box will display an entry for each element instead of entries for each series.

Sample: ColorByElements.aspx

Custom Palettes

There are a number of five color palettes available in the Palette enumeration. These palettes can be combined to form a palette with a larger set of colors using the Chart.PaletteAdd() method.

Sample: MultiplePalettes.aspx

Custom palettes can also be specified by supplying the Chart.Palette or Series.Palette properties with an array of color objects. They will work in the same way as pre-defined palettes.

Coloring Individual Elements

To specify a color for an individual element it needs to be set through the Element.Color property. To specify a color for an entire series of elements, set the Series.DefaultElement.Color property.

In order to specify individual series or element colors, a populated Series or SeriesCollection is required. Please see this kb for more information.

Samples iterateElements.aspx Color elements based on value. InvisibleLegendEntry.aspx Color elements based on value.

SeriesTypeFinancial

Financial series types like candlestick and bar use Element.SecondaryColor to fill elements that have a lower close price than open price.

SeriesType.Line

A 2D line's thickness, and style can be controlled with the Series.Line property however, the line color is based on individual element colors.

Smart Palette

The SmartPalette object allows you to create a standard color scheme for different charts that show related data. It does this by establishing a list of series or element names and the colors they should use. Fortunately, it does not require you to manually define all these name color pairs as it can do this automatically. A SmartPalette is also used as a collection container for SmartColor objects discussed later in this tutorial.

Working with the SmartPalette object

To create a smart palette that any charts can use, a populated SeriesCollection is required. Then a palette enumeration member or array of colors can be used to generate the SmartPalette based on the names of series in a series collection or element names in a series series. When the SmartPalette object is created it can be saved as XML and loaded by any chart with access to the xml file.

Manually Defining a SmartPalette

The code below demonstrates manually populating a smart palette object.

[C#]
SmartPalette sp = new SmartPalette();
sp.Add("Series 1", Color.Red);
sp.Add("Series 2", Color.Blue);

[Visual Basic]
Dim sp As New SmartPalette()
sp.Add("Series 1", Color.Red)
sp.Add("Series 2", Color.Blue)

Automatically Generating a SmartPalette

This code will generate a smart palette based on the colors specified by the Palette.One enumeration and match them with element names within the mySeries series object.

[C#]
SmartPalette sp = mySeries.GetSmartPalette(Palette.One);

[Visual Basic]
Dim sp As SmartPalette = mySeries.GetSmartPalette(Palette.One)

Saving the SmartPalette

Now that the SmartPalette object is generated and ready to use, it can be used by all charts related to this information. In order to use this object in other web pages it must be saved as xml. The following code demonstrates this.

[C#]
sp.SaveState("ClientSmartPalette.xml");

[Visual Basic]
sp.SaveState("ClientSmartPalette.xml")

Sample: SmartPaletteSaving.aspx

[C#]
SmartPalette sp = new SmartPalette("ClientSmartPalette.xml");

[Visual Basic]
Dim sp As New SmartPalette("ClientSmartPalette.xml")

Sample: SmartPaletteLoading.aspx  SmartPaletteSaving.aspx

Applying the SmartPalette

There are a couple ways the smart palette can be used. One way is to specify the SmartPalette for the whole chart. In this case, any element or series that matches a SmartPalette entry will inherit the associated color.

[C#]
Chart.SmartPalette = sp;

[Visual Basic]
Chart.SmartPalette = sp

The other option allows narrowing the use of the smartPalette to a chart area by means of specifying the smartPalette  for the chart area's seriesCollection.

[C#]
ChartArea ca = new ChartArea();
ca.SeriesCollection.SmartPalette = sp;
Chart.ExtraChartAreas.Add(ca);

[Visual Basic]
Dim ca As New ChartArea()
ca.SeriesCollection.SmartPalette = sp
Chart.ExtraChartAreas.Add(ca)

SmartColor objects

The SmartColor object provides a feature that sets colors of elements based on a condition. For example, if elements on a chart that are below 0 must be red, this object will provide the functionality to do this automatically. The following code snippet demonstrates how this can be achieved. The parameters in the SmartColor constructor refer to the color that should be used, a range of numeric or DateTime values, and the Element property to compare against the specified range.

[C#]

SmartColor scol = new SmartColor(Color.Red,new ScaleRange(-1000,0),ElementValue.YValue);
Chart.SmartPalette.Add(scol);

[Visual Basic]

Dim scol As new SmartColor(Color.Red,new ScaleRange(-1000,0),ElementValue.YValue)
Chart.SmartPalette.Add(scol);

This object also provides a LegendEntry property which can be used to provide a reference in the legend to the color scheme of the chart. If tokens are used in the legend entry label text, they will be based on the specified scale range object.

Gradient SmartColor

The SmartColor object also contains a SecondaryColor property. When specified, the elements that fall within the smart color's range will be colored based on where they fall within the range. For example, using a range of 0 to 100 with Color.Red and secondary color Color.Yellow; an element with the value of 0 will be red, a value of 100 will yield yellow and 50 results in orange.

See sample: Features/SmartColorGradient.aspx

The SmartColor object is used in conjunction with maps to provide thematic mapping functionality. For more information on thematic mapping see the Map Styling tutorial.